<script setup>
import { useActionQueryStore } from '../../store/action/query/actionQueryStore';
// 订单管理
const actionQueryStore = useActionQueryStore();
const options=[
    {value:'研学活动',label:'研学活动'},
    {value:'社教活动',label:'社教活动'}
]
const stateOption=[
    {value:'0' ,label:'待支付'},
    {value:'1' ,label:'已支付'},
]
</script>
<template>
    <div class="header">
        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <span>订单管理</span>
                </div>
            </template>
            <el-from class="search-form" inline>
                <el-form-item label="姓名"><el-input v-model="actionQueryStore.username">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template></el-input></el-form-item>
                <el-form-item label="预约时间">
                    <el-date-picker v-model="actionQueryStore.timeRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item label="凭证类型">
                    <el-select v-model="actionQueryStore.actionType" placeholder="选择凭证类型" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="actionQueryStore.status" placeholder="选择订单状态" clearable>
                        <el-option v-for="item in stateOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-from>
        </el-card>
    </div>
</template>
<style scoped>
.header {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    position: relative;
}

.search-form {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.search-form .el-form-item {
    margin-bottom: 16px;
    margin-right: 16px;
}

.search-form .el-input,
.search-form .el-select,
.search-form .el-date-picker {
    width: 220px;
}
</style>